@mixin color($color, $bgColor) {
	color: $color;
	background-color: $bgColor;

	&.is-plain {
		color: $color;
		border-collapse: $color;
		background-color: #fff;
	}
}

.cl-tag {
	border-radius: 6rpx;
	padding: 0 20rpx;
	height: 56rpx;
	line-height: 56rpx;
	font-size: 26rpx;
	color: #fff;
	display: inline-block;

	&__close {
		margin-left: 10rpx;
	}

	&--small {
		height: 56rpx;
		line-height: 56rpx;
	}

	&--mini {
		height: 48rpx;
		line-height: 48rpx;
		font-size: 24rpx;
	}

	&.is-round {
		border-radius: 48rpx;
	}

	&.is-plain {
		border-width: 1rpx;
		border-style: solid;
	}

	&--primary {
		// @include color($cl-color-primary);
		@include color(#FFCC00, #FEFBEF);
	}

	&--success {
		// @include color($cl-color-success);
		@include color(#01F087, #F1FFF8);
	}

	&--warning {
		// @include color($cl-color-warning);
		@include color(#FFCC00, #FEFBEF);
	}

	&--error {
		// @include color($cl-color-error);
		@include color(#f56c6c, #FFF2E9);
	}

	&--info {
		// @include color($cl-color-info);
		@include color(#999999, #F7F7F7);
	}
}

.cl-tag + .cl-tag,
cl-tag + cl-tag {
	margin-left: 20rpx;
}
